<template>
    <div>
        <div class="treeIcon">
            <a-icon type="apartment" class="icon"/>
            <span>博特智能</span>
        </div>
        <a-tree
                :show-line="showLine"
                defaultExpandAll
                @select="onSelect"
                :tree-data="treeData"
                :replace-fields = "replaceFields"
        >
            <a-icon slot="smile" type="carry-out" />
        </a-tree>
    </div>
</template>

<script>
    export default {
        name: "deptTree",
        data() {
            return {
                showLine: true,
                treeData: [
                    {
                        title: '0-0',
                        key: '0-0',
                        slots: {
                            icon: 'smile',
                        },
                        children: [
                            {
                                title: '0-0-0',
                                key: '0-0-0',
                                children: [
                                    { title: '0-0-0-0', key: '0-0-0-0' },
                                    { title: '0-0-0-1', key: '0-0-0-1' },
                                    { title: '0-0-0-2', key: '0-0-0-2' },
                                ],
                            },
                            {
                                title: '0-0-1',
                                key: '0-0-1',
                                children: [
                                    { title: '0-0-1-0', key: '0-0-1-0' },
                                    { title: '0-0-1-1', key: '0-0-1-1' },
                                    { title: '0-0-1-2', key: '0-0-1-2' },
                                ],
                            },
                            {
                                title: '0-0-2',
                                key: '0-0-2',
                            },
                        ],
                    },
                    {
                        title: '0-1',
                        key: '0-1',
                        children: [
                            { title: '0-1-0-0', key: '0-1-0-0' },
                            { title: '0-1-0-1', key: '0-1-0-1' },
                            { title: '0-1-0-2', key: '0-1-0-2' },
                        ],
                    },
                    {
                        title: '0-2',
                        key: '0-2',
                    },
                ],
                replaceFields: {
                    children:'children',
                    title:'title',
                    key:'key'
                },

            };
        },
        methods: {
            onSelect(selectedKeys, info) {
                console.log('selected', selectedKeys, info);
                this.emit('selectTreeNode',selectedKeys)
            },
        },
    }
</script>

<style lang="less" scoped>
    .treeIcon{
        height: 20px;
        width: 100%;
        text-align: left;
        /*background: #91d5ff;*/
        color: #317de7;
        font-size: 17px;
        .icon{
            margin-right: 10px;
        }
    }
</style>
